<template>
	<view>
		<!-- #ifndef MP -->
		<!-- <view class="sys-head" :style="{ height: statusBarHeight }"></view> -->
		<!-- #endif -->
		<!-- <searchNavbar :parameter="parameter" :isMap="isMap"></searchNavbar> -->

		<!-- 导航栏 -->
		<dropdown-screen :categoryArr="categoryArr" @finish="finish"></dropdown-screen>
		<!-- 商铺列表 -->
		<view class="project-recommend">
			<view class="list">
				<view class="content" v-for="(item,index) in list" :key="item.id"
					@click="toPage('/pages/details/project/project?id='+item.id)">
					<view class="top acea-row row-between row-middle">
						<view class="left acea-row row-middle  ">
							<image src="" mode="aspectFill"></image>
							<text class="enter_limit">{{item.name}}</text>
						</view>
						<view class="right">
							<image src="" mode=""></image>
						</view>
					</view>
					<view class="bottom acea-row row-between row-middle">
						<text :class="item.auditStatus == 1?'':'equie'">{{auditStatusDic[item.auditStatus]}}</text>
						<!-- <image src="../../static/images/gift.png" mode=""></image> -->
						<view class="contents acea-row row-middle row-between ">
							<image :src="item.thumbnail" mode=""></image>
							<view class="contents">
								<view class="line limit">
									地址： {{item.address || ''}}
								</view>
								<view class="line">
									开发商： {{item.developerName || '不详'}}
								</view>
								<view class="line">
									开工/交付时间： {{item.commencementDate || '不详'}}
								</view>
							</view>

						</view>
					</view>
					<view class="area acea-row row-around row-middle">
						<view class="col_38 acea-row row-column text_c" @click="runList(0,item)">
							<text>{{item.managementNum || '0'}}</text><text class="col_A6 mt_28">出租套数</text>
						</view>
						<view class="col_38 acea-row row-column text_c" @click="runList(2,item)">
							<text>{{item.saleNum || '0'}}</text><text class="col_A6 mt_28">出售套数</text>
						</view>
						<view class="col_38 acea-row row-column text_c">
							<text>{{item.residentialPrice || '0'}}</text><text class="col_A6 mt_28">住宅均价</text>
						</view>
						<view class="col_38 acea-row row-column text_c">
							<text>{{item.commercialPrice || '0'}}</text><text class="col_A6 mt_28">商业均价</text>
						</view>
					</view>
				</view>
			</view>

				<slot></slot>
		</view>
	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import dropdownScreen from '../dropdown-project/dropdown-project.vue'
	import {
		getIndexData
	} from "@/api/api.js";
	import {
		getProjectApi
	} from '@/api/api.js'
	import {
		dictionary
	} from "@/api/subletOfShop.js"
	// import parse from '../../../subpackageuni/uview-ui/libs/config/props/parse';
	import {
		toPage
	} from '@/filters/commFilter.js'
	export default {
		components: {
			dropdownScreen
		},
		data() {
			return {
				indexData: {},
				statusBarHeight: statusBarHeight,
				parameter: {
					return: 1,
					placeholder: '搜索项目名称'
				},
				isMap: false,
				page: 1,
				limit: 10,
				list: [],
				loading: true,
				loadTitle: '',
				categoryArr: [],
				sxFiled: ['buildingType', 'floorage', 'residentialPrice', 'sort'],
				sxFilter: {
					buildingType: '',
					floorage: '',
					residentialPrice: '',
					sort: ''
				},
				projectKey: '',
				search: {}
			};
		},
		created() {
			this.getDictionary();
			// this.getList();
			this.getIndex()
		},
		methods: {
			toPage,
			runList(ind, data) {

				let m = this.indexData.menus.map(item => {
					let type = -1;
					switch (item.name) {
						case '商铺':
							type = 883;
							break;
						case '写字楼':
							type = 884;
							break;
						case '仓库':
							type = 885;
							break;
						case '厂房':
							type = 911;
							break;
						case '土地':
							type = 912;
							break;
						case '房屋':
							type = 913;
							break;
						case '公寓':
							type = 1014;
							break;
						default:
							type = -1;
					}
					return {
						name: item.name,
						type
					}
				});
				let s = [{
					name: '出租',
					status: 1
				}, {
					name: '转让',
					status: 3
				}, {
					name: '出售',
					status: 2
				}, {
					name: '求租',
					status: 4
				}, {
					name: '求购',
					status: 5
				}]
				console.log("indexData", m)
				let url = '/pages/others/shopAreaList/shopAreaList?index=' + (s[ind] ? 1 : (m.length + 1)) + '&type=' + (s[
						ind] ? s[ind].status : 0) + '&m=' + JSON.stringify(
						m) +
					'&projectId=' + data.id
				console.log(url)
				uni.navigateTo({
					url
				})
			},
			toPages(path) {
				uni.navigateTo({
					url: path
				})
			},
			//获取首页数据
			async getIndex() {
				try {
					let res = await getIndexData();
					this.indexData = res.data
				} catch (e) {
					//TODO handle the exception
				}
			},
			goback() {
				uni.navigateBack()
			},
			
			async getList() {
				if (this.page == 1) {
					this.list = []
				}
				this.loading = false;
				try {
					// let res = await getProjectApi({
					// 	page: this.page,
					// 	limit: this.limit,
					// 	name: this.projectKey,
					// 	city: this.$city,
					// 	...this.sxFilter
					// });
					// this.loading = true;
					// if (this.page == 1) {
					// 	this.list = res.data.list;
					// 	if (this.list.length <= 0) {
					// 		this.loadTitle = '暂无数据'
					// 	}
					// } else {
					// 	this.list = this.list.concat(res.data.list);
					// 	if (res.data.list.length <= 0) {
					// 		this.loadTitle = '已加载所有'
					// 	}
					// }
					this.$emit("toSearch", {
						page: this.page,
						limit: this.limit,
						name: this.projectKey,
						city: this.$city,
						...this.sxFilter,
						...this.search
					})
				} catch (e) {
					this.loading = true;
					this.$util.Tips({
						title: e
					})
					//TODO handle the exception
				}
				console.log('index_projectList', this.list)
			},
			//获取户型字典列表
			async getDictionary() {
				try {
					const {
						data
					} = await dictionary({
						gids: 31
					});
					this.$nextTick(() => {

						data['31'] && data['31'].map(item => {
							item.value = item.id;
							item.text = item.name;
						})
						this.categoryArr = JSON.parse(JSON.stringify(data['31']));
					})

				} catch (e) {
					//TODO handle the exception
				}
			},
			finish(data) {
				console.log('data', data)
				switch (data.f) {
					case 1:
						this.sxFilter[this.sxFiled[data.f - 1]] = data.id;
						break;
					case 2:
						this.sxFilter[this.sxFiled[data.f - 1]] = data.text.replace('m²', '');

						break;
					case 3:
						this.sxFilter[this.sxFiled[data.f - 1]] = data.text.replace('元', '');
						break;
					case 4:
						this.sxFilter[this.sxFiled[data.f - 1]] = data.value;
						break;
					default:
						this.sxFilter[this.sxFiled[data.f - 1]] = ''

				}
				this.page = 1;
				this.getList();

			},
			toSearch(params) {
				this.search = {
					...this.search,
					...params
				}
				this.page = 1;
				this.list = [];
				this.getList();
			},
		},
		onReachBottom() {
			this.page++;
			this.getList();
		}
	}
</script>

<style lang="scss" scoped>
	.icon-xiangzuo {
		color: #ffffff;
		// position: absolute;
		font-size: 40rpx;
		// left: 0rpx;
		// width: 100rpx;
		// height: 56rpx;
		// line-height: 54rpx;
		// top: 50%;
		// transform: translateY(-50%);
	}

	.project-recommend {
		// padding: 30rpx 0;

		.project~.project {
			margin-top: 24rpx;
		}


		.project {
			padding: 30rpx;
			border-radius: 10px;
			background: rgba(255, 255, 255, 1);
			position: relative;

			.project-tag-gray {
				width: 70rpx;
				height: 36rpx;
				line-height: 36rpx;
				text-align: center;
				font-size: 22rpx;
				font-weight: 400;
				color: rgba(166, 166, 166, 1);
				border-radius: 4rpx;
				background: rgba(242, 242, 242, 1);
				position: absolute;
				right: 28rpx;
				top: 30rpx
			}

			.img {
				width: 216rpx;
				height: 202rpx;
				border-radius: 10rpx;
				position: relative;
				background: #e3e3e3;

				image {
					width: 216rpx;
					height: 202rpx;
				}

				.distance {
					padding: 12rpx;
					width: 100%;
					position: absolute;
					bottom: 0;
					left: 0;
					font-size: 20rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					line-height: 42rpx;

					image {
						width: 14rpx;
						height: 16rpx;
					}
				}
			}

			.info {
				width: calc(100% - 230rpx);
				height: 202rpx;
				margin-left: 12rpx;

				.name {
					width: 260rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: rgba(0, 0, 0, 1);
				}

				.address {
					padding: 0;
					width: 100%;
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(125, 125, 125, 1);
				}

				.sell-now {
					font-size: 24rpx;
					font-weight: 400;
					line-height: 36rpx;
					color: rgba(125, 125, 125, 1);
				}

				.sell-status {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(196, 196, 196, 1);
				}

				.red-price {
					min-width: 40%;
					font-size: 30rpx;
					font-weight: 700;
					color: rgba(238, 33, 45, 1);

					text {
						font-size: 22rpx;
						font-weight: 400;
						color: rgba(238, 33, 45, 1);
					}
				}

				.gray-price {
					min-width: 40%;
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(125, 125, 125, 1);

					text {
						font-size: 22rpx;
						font-weight: 400;
						color: rgba(125, 125, 125, 1);
					}

				}

				.house {
					.tag {
						// width: 58rpx;
						padding: 0 4rpx;
						height: 30rpx;
						line-height: 30rpx;
						text-align: center;
						border-radius: 4rpx;
						background: rgba(238, 33, 45, 1);
						font-size: 22rpx;
						font-weight: 400;
						color: rgba(255, 255, 255, 1);
					}
				}

				.shop {
					.tag {
						width: 58rpx;
						height: 30rpx;
						line-height: 30rpx;
						text-align: center;
						border-radius: 4rpx;
						background: rgba(242, 242, 242, 1);
						font-size: 22rpx;
						font-weight: 400;
						color: rgba(125, 125, 125, 1);
					}
				}
			}
		}
	}

	.fixed-top {
		width: 100%;
		background: #EE212D;
		position: fixed;
		top: 0;
		left: 0;
		height: 122rpx;
		z-index: 999;
		background: linear-gradient(90deg, #EE212D 0%, #EE212D 100%);
	}

	.search-header {
		width: 100%;
		padding: 26rpx;
		background: #EE212D;

		image {
			width: 28rpx;
			height: 32rpx;
			margin-right: 34rpx;
		}

		.search-map {
			font-size: 22rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			text-align: center;

			image {
				width: 40rpx;
				height: 36rpx;
			}
		}
	}

	.search-box {
		// width: 586rpx;
		flex: 1;
		height: 70rpx;
		opacity: 1;
		border-radius: 36rpx;
		background: rgba(255, 255, 255, 1);
		padding: 12rpx 32rpx;

		.search-ipt {
			display: flex;
			align-items: center;
			color: rgba(166, 166, 166, 1);

			text {
				padding: 0 16rpx 0 0rpx;
			}
		}
	}

	.list {
		margin: 24rpx 20rpx 0;
	}

	.content {
		padding: 30rpx 26rpx;
		margin-top: 32rpx;
		background-color: #fff;
		border-radius: 10rpx;

		.top {
			height: 56rpx;
			padding-bottom: 14rpx;
			border-bottom: 2rpx solid #EEEEEE;

			.left {
				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 12rpx;
				}
			}

			.right {
				image {
					width: 18rpx;
					height: 28rpx;
				}
			}
		}

		.bottom {
			position: relative;
			margin: 8rpx 0;

			image {
				height: 144rpx;
				width: 170rpx;
				border-radius: 10rpx;
				margin-right: 22rpx;
			}

			.contents {
				flex: 1;
				color: #808080;
			}

			.line {
				word-break: break-all;
				line-height: 44rpx;
				font-size: 24rpx;
				color: #808080;
			}

			.equie {
				position: absolute;
				right: 0;
				top: 4rpx;
				color: #EE212D;
				font-size: 24rpx;
			}

			.limit {
				max-width: 350rpx;
			}
		}
	}

	.area {
		margin: 16rpx 0 0;
		background-color: #F7F7F7;
		height: 144rpx;
		border-radius: 4rpx;
		box-sizing: border-box;
		padding: 16rpx 0;
	}

	.line_bottom {
		margin: 0 0 32rpx;
		height: 3rpx;
		background-color: #EEEEEE;
		overflow: hidden;
	}

	.btn {
		width: 100rpx;
		height: 44rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		color: #808080;
		box-sizing: border-box;
		text-align: center;
		border-radius: 4px;
		border: 2rpx solid #E5E5E5;

		&:not(:last-child) {
			margin-right: 24rpx;
		}
	}

	.publish_btn {
		position: fixed;
		left: 50%;
		transform: translateX(-199rpx);
		bottom: 48rpx;
		background-color: #EE212D;
		color: #fff;
		width: 398rpx;
		height: 98rpx;
		line-height: 98rpx;
		color: #fff;
		text-align: center;
		box-shadow: 0px 3px 8px 0px #F50F1E;
		border-radius: 100rpx;
		z-index: 999
	}
</style>